<template>
  <view class="detail-view">
    <u-form label-width="160" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="调出仓库" prop="fromWarehouse">
          <u-input
            @click="goWarehouse(1)"
            class="dis-input"
            disabled
            v-model="add_form.fromWarehouse"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item required label="调入仓库" prop="targetWarehouse">
          <u-input
            @click="goWarehouse(2)"
            class="dis-input"
            disabled
            v-model="add_form.targetWarehouse"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item required label="商品清单">
          <view @click="selGoodsPage" class="form-value add-btn-go">
            <u-icon name="plus" size="24" color="#fb5904"></u-icon>
            <text class="form-value add-text">选择商品</text>
          </view>
        </u-form-item>
        <view class="goods-ul" v-if="goods_list.length">
          <block v-for="(item, index) in goods_list" :key="index">
            <view class="goods-li clearfix">
              <view class="goods-img float_left" @click="delGoods(item, index)"
                ><u-icon
                  size="40"
                  name="minus-circle-fill"
                  color="#fb5904"
                ></u-icon
              ></view>
              <view class="float_left info">
                <view class="goods-name ellipsis">{{ item.materielName }}</view>
                <view class="goods-code">{{ item.materielCode }}</view>
                <view class="goods-num"
                  >{{ item.unitName }};{{ item.skuName }}</view
                >
                <view class="num-ul">
                  <view class="num-li">
                    <view class="label">可售库存</view>
                    <input
                      type="digit"
                      class="input-dis"
                      disabled
                      v-model="item.inventoryNum"
                    />
                  </view>
                  <view class="num-li">
                    <view class="label">调拨数量</view>
                    <input
                      type="digit"
                      @blur="numChange(index)"
                      placeholder="请输入"
                      v-model="item.num"
                    />
                  </view>
                  <view class="num-li" v-if="item.isEq === 5">
                    <view class="label">其他单位</view>
                    <input
                      type="digit"
                      placeholder="请输入"
                      v-model="item.otherNum"
                    />
                  </view>
                </view>
                <view class="num-ul" v-if="enableLocationManagement === 5">
                  <view class="num-li">
                    <view class="label">调出库区库位</view>
                    <input
                      @click="openLocation(1, index, item)"
                      disabled
                      type="text"
                      placeholder="请选择"
                      :value="
                        item.outStorageLocationName
                          ? item.outAreaName + '-' + item.outStorageLocationName
                          : ''
                      "
                    />
                  </view>
                  <view class="num-li">
                    <view class="label">调入库区库位</view>
                    <input
                      @click="openLocation(2, index, item)"
                      disabled
                      type="text"
                      placeholder="请选择"
                      :value="
                        item.inStorageLocationName
                          ? item.inAreaName + '-' + item.inStorageLocationName
                          : ''
                      "
                    />
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
      <view class="form-model-view">
        <u-form-item label="备注" label-position="top"
          ><u-input type="textarea" v-model="add_form.remark"
        /></u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom"
      ><u-button
        class="handel-btn"
        @click="submit"
        :loading="sub_load"
        :ripple="true"
        type="primary"
        >提交</u-button
      ></view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      sub_load: false,
      werahouseData: "",
      warehouseGoods: "",
      add_form: {
        fromWarehouse: "", // 仓库名称
        targetWarehouse: "",
        fromWarehouseId: "", // 所属仓库id
        targetWarehouseId: "",
        operatorName: "",
        couponAmount: "",
        otherAmount: "",
        remark: "",
      },
      goods_list: [],
      del_goods_id: [],
      tag: "",
      no: "",
      goods_index: 0,
      areaBysku: "",
    };
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.name;
    },
    enableLocationManagement() {
      return parseInt(this.$store.state.basicSet.enableLocationManagement);
    },
  },
  watch: {
    werahouseData(val) {
      if (this.tag === 1) {
        if (val) {
          this.add_form.fromWarehouseId = val.id;
          this.add_form.fromWarehouse = val.warehouseName;
          this.goods_list = [];
        }
      } else if (this.tag === 2) {
        if (val) {
          this.add_form.targetWarehouseId = val.id;
          this.add_form.targetWarehouse = val.warehouseName;
        }
      }
    },
    // 选择商品资料页面返回
    warehouseGoods(list) {
      if (list) {
        this.selGoods(list);
      }
    },
    areaBysku(val) {
      if (val) {
        const target = this.$u.deepClone(this.goods_list);
        if (this.tag === 1) {
          target[this.goods_index] = {
            ...target[this.goods_index],
            outAreaId: val.areaId,
            outAreaName: val.areaName,
            outAreaCode: val.areaCode,
            outStorageLocationId: val.storageLocationId,
            outStorageLocationName: val.storageLocationName,
            outStorageLocationCode: val.storageLocationCode,
          };
        } else if (this.tag === 2) {
          if (val) {
            target[this.goods_index] = {
              ...target[this.goods_index],
              inAreaId: val.areaId,
              inAreaName: val.areaName,
              inAreaCode: val.areaCode,
              inStorageLocationId: val.storageLocationId,
              inStorageLocationName: val.storageLocationName,
              inStorageLocationCode: val.storageLocationCode,
            };
          }
        }
        this.goods_list = target;
      }
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(options) {
    if (options.id) {
      this.Allocat_id = options.id;
      uni.setNavigationBarTitle({
        title: "编辑调拨单",
      });
      this.getAllocateInfo();
    }
  },
  methods: {
    // 去选择库区库位页面
    openLocation(tag, index, row) {
      this.tag = tag;
      this.goods_index = index;
      const warehouseId =
        tag === 1
          ? this.add_form.fromWarehouseId
          : this.add_form.targetWarehouseId;
      this.goPage(
        `/pagesT/stock/WarehouseRegionBySku?basicGoodsId=${row.materielId}&skuId=${row.skuId}&warehouseId=${warehouseId}`
      );
    },
    delGoods(row, index) {
      if (row.id) {
        this.del_goods_id.push(row.id);
      }
      this.goods_list.splice(index, 1);
    },
    numChange(index) {
      const target = this.$u.deepClone(this.goods_list);
      if (target[index].num > target[index].inventoryNum) {
        target[index].num = target[index].inventoryNum;
      } else if (target[index].num < 0) {
        target[index].num = 0;
      }
      this.goods_list = target;
    },
    goWarehouse(tag) {
      this.tag = tag;
      this.goPage("/pagesT/werahouse/selWerahouse");
    },
    selGoodsPage() {
      if (!this.add_form.fromWarehouseId) {
        this.$u.toast("请选择仓库");
        return;
      }
      uni.setStorageSync("warehouseGoods", this.goods_list);
      this.goPage(
        "/pagesT/goods/GoodsbyWarehouse?id=" + this.add_form.fromWarehouseId
      );
    },
    // 详情
    getAllocateInfo() {
      this.$u.api.getAllocateInfo(this.Allocat_id).then(({ data }) => {
        this.no = data.no;
        this.add_form.fromWarehouse = data.warehouseName;
        this.add_form.fromWarehouseId = data.warehouseId;
        this.add_form.targetWarehouse = data.inWarehouseName;
        this.add_form.targetWarehouseId = data.inWarehouseId;
        this.add_form.operatorName = data.operatorName;
        this.add_form.remark = data.remark;
        this.goods_list = data.details.map((item) => {
          return {
            ...item,
            inventoryNum: Number(item.inventoryNum),
            num: Number(item.num),
            otherNum: item.isEq === 5 ? Number(item.otherNum) : "",
            warehouseName: this.add_form.fromWarehouse,
            inwarehouseName: this.add_form.targetWarehouse,
            inAreaId: item.inAreaId,
            inAreaName: item.inAreaName,
            inAreaCode: item.inAreaCode,
            inStorageLocationId: item.inStorageLocationId,
            inStorageLocationName: item.inStorageLocationName,
            inStorageLocationCode: item.inStorageLocationCode,
            outAreaId: item.outAreaId,
            outAreaName: item.outAreaName,
            outAreaCode: item.outAreaCode,
            outStorageLocationId: item.outStorageLocationId,
            outStorageLocationName: item.outStorageLocationName,
            outStorageLocationCode: item.outStorageLocationCode,
          };
        });
      });
    },
    // 多选商品确定
    selGoods(list) {
      this.goods_list = list.map((item) => {
        return {
          isEq: item.isEq,
          otherNum: Number(item.otherNum),
          materielId: item.materielId,
          materielCode: item.materielCode,
          materielName: item.materielName,
          warehouseName: item.warehouseName,
          inwarehouseName: this.targetWarehouse,
          skuName: item.skuName,
          skuId: item.skuId,
          unitName: item.unitName,
          inventoryNum: Number(item.allNum),
          num: Number(item.buyNum),
          categoryTitle: item.categoryTitle,
          costUnitPrice: item.costPrice,
          inAreaId: "",
          inAreaName: "",
          inAreaCode: "",
          inStorageLocationId: "",
          inStorageLocationName: "",
          inStorageLocationCode: "",
          outAreaId: "",
          outAreaName: "",
          outAreaCode: "",
          outStorageLocationId: "",
          outStorageLocationName: "",
          outStorageLocationCode: "",
        };
      });
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.goods_list.length) {
            this.$u.toast("请选择商品");
            return;
          }
          let flag = false;
          this.goods_list.forEach((item) => {
            if (Number(item.inventoryNum) === 0) {
              flag = true;
            }
          });
          if (flag) {
            this.$u.toast("可售库存为空，无法调拨");
            return;
          }
          const params = {
            no: this.no || "",
            warehouseId: this.add_form.fromWarehouseId,
            inWarehouseId: this.add_form.targetWarehouseId,
            warehouseName: this.add_form.fromWarehouse,
            inWarehouseName: this.add_form.targetWarehouse,
            operatorName: this.userName,
            remark: this.add_form.remark,
            details: this.goods_list.map((item) => {
              return {
                isEq: item.isEq,
                id: item.id,
                materielId: item.materielId,
                materielName: item.materielName,
                materielCode: item.materielCode,
                skuId: item.skuId,
                unitName: item.unitName,
                skuName: item.skuName,
                num: item.num,
                costUnitPrice: item.costUnitPrice,
                otherNum: item.otherNum,
                inAreaId: item.inAreaId,
                inAreaName: item.inAreaName,
                inAreaCode: item.inAreaCode,
                inStorageLocationId: item.inStorageLocationId,
                inStorageLocationName: item.inStorageLocationName,
                inStorageLocationCode: item.inStorageLocationCode,
                outAreaId: item.outAreaId,
                outAreaName: item.outAreaName,
                outAreaCode: item.outAreaCode,
                outStorageLocationId: item.outStorageLocationId,
                outStorageLocationName: item.outStorageLocationName,
                outStorageLocationCode: item.outStorageLocationCode,
              };
            }),
          };
          this.sub_load = true;
          if (this.Allocat_id) {
            this.$u.api
              .updateAllocate(this.Allocat_id, {
                ...params,
                deleteArray: this.del_goods_id,
              })
              .then((res) => {
                this.sub_load = false;
                this.$u.toast("修改成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 2000);
              })
              .catch((err) => {
                this.sub_load = false;
              });
          } else {
            this.$u.api
              .addAllocate(params)
              .then((res) => {
                this.$u.toast("新建成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 2000);
              })
              .catch((err) => {
                this.sub_load = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-ul {
  padding-bottom: 20rpx;
  .goods-title {
    margin-bottom: 20rpx;
    line-height: 80rpx;
    font-size: 24rpx;
    border-bottom: 1px solid #eeeeee;

    .float_right {
      color: $uni-color-primary;
    }
  }

  .goods-li {
    line-height: 32rpx;
    margin-top: 20rpx;

    .goods-img {
      margin-right: 20rpx;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 8rpx;
        display: block;
      }
    }

    .info {
      width: 640rpx;
      .num-ul {
        display: flex;
        padding-top: 20rpx;
        .num-li {
          font-size: 24rpx;
          line-height: 36rpx;
          flex: 3;
          text-align: center;
          position: relative;
          font-weight: bold;
          padding: 0 16rpx;
          .label {
            font-weight: 400;
            color: #999999;
          }
          input {
            text-align: center;
            border-bottom: 1px solid $uni-color-primary;
            &.input-dis {
              border-bottom: 1px solid #eeeeee;
            }
          }
          &::after {
            display: block;
            content: "";
            position: absolute;
            width: 1px;
            height: 60rpx;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            background-color: #eeeeee;
          }
          &:last-child {
            &::after {
              display: block;
              content: "";
              position: absolute;
              width: 1px;
              height: 50rpx;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              background-color: transparent;
            }
          }
        }
      }
      .goods-name {
        width: 640rpx;
        height: 34rpx;
        line-height: 34rpx;
      }

      .goods-code {
        font-size: 24rpx;
        padding-top: 10rpx;
      }

      .goods-num {
        padding-top: 10rpx;
        font-size: 24rpx;

        .price {
          font-size: 28rpx;
          font-weight: bold;
          color: $uni-color-error;
        }
      }
    }
  }
}
.form-value {
  .add-text {
    color: #fb5904;
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
